<template>
<div class="container">
    <!-- 顶部分标题栏和返回按钮 -->
    <back-topic :topic="topic"></back-topic>
    <!-- 标题栏下面的重叠的图 -->
    <img-overlapping></img-overlapping>
    <!-- 引入商品列表上面的标题部分 -->
    <goods-topic :topicHead="topicHead" :topicEnd="topicEnd" class="goods"></goods-topic>
    <!--商品的列表里面的单个商品 点击跳转到商品详情页  GoodsListOne是传递的值，用来改写这个模块的里面的值，详情看goodsListOne组件-->
    <router-link to="/productDetail" tag="div" class="goods">
        <!-- 列表页中的单个商品 -->
        <goods-list-one :GoodsListOne="GoodsListOne"></goods-list-one>
    </router-link>
    <router-link to="/productDetail" tag="div" class="goods">
        <!-- 列表页中的单个商品 -->
        <goods-list-one :GoodsListOne="GoodsListOne"></goods-list-one>
    </router-link>
    <router-link to="/productDetail" tag="div" class="goods">
        <!-- 列表页中的单个商品 -->
        <goods-list-one :GoodsListOne="GoodsListOne"></goods-list-one>
    </router-link>

</div>
</template>

<script>
// 引入顶部的返回按钮
import BackTopic from '../commentCompontents/back-topic'
// 引入顶部标题栏下面的重叠的照片
import ImgOverlapping from '../commentCompontents/imgOverlapping'
// 引入商品列表页的标题部分
import GoodsTopic from '../commentCompontents/goodsTopic'
// 商品的列表里面的单个商品
import GoodsListOne from '../commentCompontents/goodsListOne'
export default {
    name: "everyDaySign",
    components: {
        BackTopic,
        ImgOverlapping,
        GoodsTopic,
        GoodsListOne,

    },
    data() {
        return {
            // 绑定给顶部的标题的值
            topic: "0元试用",
            // 传递给列表标题的值，
            topicHead: "免费",
            topicEnd: "试用",
            // 传递给列表单个商品模块的值
            GoodsListOne: {
                personGroup: "限4件",
                Immediately: "立即申请",
                GoodsNumber: "20人已经申请",
                /// 控制单个商品模块标题下面的抢购数量是否显示，默认不显示
                numberShow: true,
                // 控制进度条的显示与隐藏
                barShow: false,

            },

        }
    },
}
</script>

<style scoped>
.goods {
    margin-top: .3rem;
}
</style>
